<template>
  <el-container>
    <el-header>
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
        <el-form-item label="物料编码" prop="name">
          <el-input
            v-model="queryParams.materialCode"
            placeholder="请输入物料编码"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="物料名称" prop="name">
          <el-input
            v-model="queryParams.materialName"
            placeholder="请输入物料名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="规格型号" prop="name">
          <el-input
            v-model="queryParams.materilaSpec"
            placeholder="请输入规格型号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="图号或标准号" prop="name">
          <el-input
            v-model="queryParams.thOrBh"
            placeholder="请输入图号或标准号"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="使用车间/科室" prop="name">
          <el-input
            v-model="queryParams.deptUse"
            placeholder="请输入使用车间和科室"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="使用设备/部位" prop="name">
          <el-input
            v-model="queryParams.partUse"
            placeholder="请输入使用部位"
            clearable
            size="small"
          />
        </el-form-item>


        <el-button style="background-color:#061431; border: 1px solid #1A6288 "   @click="getBjData" type="primary">查询</el-button>
      </el-form>
    </el-header>
    <el-main>
      <el-table
        :data="bjData"
        border
        align="center"
        style="width: 100%;">
        <el-table-column
          prop="id"
          label="序号"
          width="60"
        >
          <template slot-scope="scope">
            <span>{{(queryParams.current-1)*queryParams.size+( scope.$index + 1)}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="materialCode"
          align="center"
          width="200"
          label="物料编码">
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="物料名称"
          align="center"
          width="300"
        >
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.materialName"
              placement="top-start"
              :width="200"
            >
              <div class="text-ellipsis">
                {{ scope.row.materialName }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          prop="materilaSpec"
          align="center"
          width="300"
          label="规格型号">
          <template slot-scope="scope">
            <el-tooltip
              :content="scope.row.materilaSpec"
              placement="top-start"
              :width="200"
            >
              <div class="text-ellipsis">
                {{ scope.row.materilaSpec }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="mCount"
          width="120"
          align="center"
          label="现有数量">


        </el-table-column>
        <el-table-column
          prop="unitName"
          width="120"
          align="center"
          label="计量单位">
        </el-table-column>
        <el-table-column
          prop="zdCbl"
          align="center"
          width="120"
          label="最低储备量">
        </el-table-column>
        <el-table-column
          prop="thOrBh"
          align="center"
          label="图号或者标准号">
        </el-table-column>
        <el-table-column
          prop="partUse"
          width="200"
          align="center"
          label="使用部位">

        </el-table-column>
        <el-table-column
          prop="deptUse"
          width="200"
          align="center"
          label="厂家名称">
        </el-table-column>
        <el-table-column
          prop="deptUse"
          align="center"
          label="使用部门">
        </el-table-column>

      </el-table>
    </el-main>
    <el-footer>
      <div style="width: 500px;margin-left: auto;margin-right: auto">
        <el-pagination
          background
          :page-size="queryParams.size"
          @current-change="pageChange"
          layout="total, prev, pager, next"
          :total="total">>
        </el-pagination>
      </div>
    </el-footer>


  </el-container>
</template>

<script>
  import {   listBpbj } from "@/api/biInfo/bjgl";

  export default {
    name: 'index',
    data() {
      return {
        queryParams: {
          current: 1,
          size: 20,
          materialCode:null,
          materilaSpec:null,
          materialName:null,
          thOrBh:null,
          deptUse:null,
          partUse:null
        },

        total:0,
        bjData:[]
      }
    },
    methods:{
      getBjData(){
        listBpbj(this.queryParams).then(response => {
          this.bjData=response.data;
          this.total = response.total;
        })

      },
      pageChange(page){
        this.queryParams.current=page;
        this.getBjData();
      }

    },
    mounted() {
      this.getBjData();
    }
  }
</script>

<style scoped>
  table, th, td {
    border: 1px solid #368AB6;
    border-collapse: collapse;
  }

</style>
